<template>
	 
	<div>
		   
		<!-- 拜访时间 -->
		   
		<van-popup v-model:show="popupShow" position="bottom" closeable>
			     
			<div class="title">
				        <span>{{ title }}</span>      
			</div>
			     
			<div class="flex_box">
				       
				<van-date-picker
					v-model="dateData.currentDate"
					:min-date="dateData.minDate"
					:show-toolbar="false"
					:formatter="formatterDate"
					swipe-duration="250"
				/>
				       
				<van-time-picker
					v-model="dateData.currentTime"
					:show-toolbar="false"
					:formatter="formatterDate"
					swipe-duration="250"
				/>
				     
			</div>
			     
			<div class="operation">
				       
				<div @click="popupShow = false">取消</div>
				       
				<div @click="timeConfirm">确定</div>
				     
			</div>
			   
		</van-popup>
		 
	</div>
</template>
<script setup>
	// eslint-disable-next-line no-unused-vars
	const props = defineProps(['title'])
	const popupShow = ref(false)
	defineExpose({ popupShow })
	const dateData = reactive({
		currentDate: formattedDate(new Date()).split('-'),
		minDate: new Date(2020, 0, 1),
		maxDate: new Date(),
		currentTime: formattedTime(),
		maxHour: new Date().getHours(),
		maxMinute: new Date().getMinutes()
	})
	//格式化日期
	const formatterDate = (type, option) => {
		if (type === 'year') {
			option.text += '年'
		}
		if (type === 'month') {
			option.text += '月'
		}
		if (type === 'day') {
			option.text += '日'
		}
		if (type === 'hour') {
			option.text += '时'
		}
		if (type === 'minute') {
			option.text += '分'
		}
		return option
	}
	const emit = defineEmits(['timeConfirm'])
	const timeConfirm = () => {
		popupShow.value = false
		let time = `${dateData.currentDate.join('-')}T${dateData.currentTime.join(':')}`
		emit('timeConfirm', time)
	}
	// 日期处理
	function formattedDate(date) {
		if (!date) return ''
		const today = date
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	}
	//时间处理
	function formattedTime() {
		let now = new Date()
		let hours = now.getHours().toString().padStart(2, '0')
		let minutes = now.getMinutes().toString().padStart(2, '0')
		return [hours, minutes]
	}
</script>
<style lang="scss" scoped>
	::v-deep(.van-overlay) {
	  background-color: rgba(0, 0, 0, 0.3);
	}
	::v-deep(.van-popup) {
	  border-radius: 5px;
	  .van-popup__close-icon {
	    font-size: 19px;
	  }
	  .title {
	    height: initial;
	    color: #353639;
	    font-weight: bold;
	    font-size: 14px;
	    padding: 20px 16px;
	    span {
	      padding-left: 4px;
	    }
	  }
	  .flex_box {
	    display: flex;
	    .van-picker:nth-child(1) {
	      flex: 2;
	    }
	    .van-picker:nth-child(2) {
	      flex: 1;
	    }
	    .van-picker-column {
	      font-size: 15px;
	    }
	  }
	  .operation {
	    padding: 16px 16px 24px;
	    display: flex;
	    border: 1px solid rgba(151, 151, 151, 0.1);
	    box-shadow: 0px 2px 20px 0px rgba(95, 95, 95, 0.2);
	    background-color: #ffffff;
	    div {
	      flex: 1;
	      text-align: center;
	      padding: 10px;
	      border-radius: 5px;
	      font-size: 15px;
	    }
	    div:nth-child(1) {
	      color: #0052cc;
	      border: 1px solid #0052cc;
	      margin-right: 11px;
	    }
	    div:nth-child(2) {
	      background-color: #0052cc;
	      border: 1px solid #0052cc;
	      color: #ffffff;
	    }
	  }
	}
</style>
